import React from 'react';
import $ from 'jquery';
let layoutSize = {
    h:'100%',
    w:'100%'
};
export default class FloatLayout extends React.Component{
    constructor(props){
        super(props);
        this.state={
            show: this.props.show,
            title: this.props.title || ' ',
            closeText: this.props.closeText || '关闭',
            top: this.props.top || 0,
            left: this.props.left || 0,
            right: this.props.right || 0,
            bottom: this.props.bottom || 0
        }
    }
    componentWillReceiveProps(nextProps){
        const show = nextProps.show;
        if(show){
            this.open()
        }else{
            this.close()
        }
    }
    open(){
        if(!this.state.show){
            this.willOpen();
            this.setState({
                show:true
            },function(){
                this.opened()
            })
        }
    }
    close(){
        if(this.state.show){
            this.willClose();
            this.setState({
                show: false
            }, function () {
                this.closed()
            })
        }
    }
    willOpen(){
        console.log('将要开启');
        if(typeof this.props.willOpen == 'function'){
            this.props.willOpen()
        }
    }
    opened(){
        console.log('已经开启');
        if(typeof this.props.opened == 'function'){
            this.props.opened()
        }
    }
    willClose(){
        console.log('将要关闭');
        if(typeof this.props.willClose == 'function'){
            this.props.willClose()
        }
    }
    closed(){
        console.log('已经关闭');
        if(typeof this.props.closed == 'function'){
            this.props.closed()
        }
    }
    shutDown(e){
        e.preventDefault();
        this.close()
    }
    componentDidMount(){
        const top = this.state.top,
          left = this.state.left,
          right = this.state.right,
          bottom = this.state.bottom;
        function setSize(){
            const h = $(window).height(),
              w = $(window).width();
            $('#layoutWrap').height(h-top-bottom).width(w-left-right);
            $('#layoutContent').height(h-top-bottom-48).css('overflow','auto');

        }
        $(window).resize(function(){
            setSize()
        });
        $(document).ready(function(){
            setSize()
        })
    }
    render(){
        return(
            <div id="layoutWrap" style={{
                display:this.state.show?'block':'none',
                position:'fixed',
                top:this.state.top || 0,
                left:this.state.left || 0,
                zIndex:99,
                backgroundColor: '#fff'
            }}>
                <h2 style={{
                    padding: '0 128px 0 10px',
                    backgroundColor:'#eee',
                    borderBottom: '1px solid #ddd',
                    fontSize:'16px',
                    lineHeight: '48px',
                    height:'48px',
                    position:'relative'
                }}>
                    <div style={{
                        float:'left',
                        lineHeight: '48px',
                        height:'48px'
                    }}>
                        {this.props.title}
                    </div>
                    <div style={{
                        float:'left',
                        lineHeight: '48px',
                        height:'48px',
                        marginLeft: '10px'
                    }}>
                        {this.props.extra}
                    </div>
                    <a
                      href='#'
                      onClick={this.shutDown.bind(this)}
                      style={{
                        position:'absolute',
                        right: 0,
                        top: 0,
                        textAlign:'center',
                        lineHeight: '48px',
                        height:'48px',
                        padding: '0 10px',
                        fontSize: '12px',
                        fontWeight: 'normal'
                      }}
                    >
                        {this.state.closeText}
                    </a>
                </h2>
                <div id="layoutContent">
                    {this.props.children}
                </div>
            </div>
        )
    }
}